<template>
  <div>
    <div class="lablebox">
      <div class="labeone" v-for="(v, i) in labelArr" :key="i" :style="i <= (colorArr.length -1) ? 'color:' + colorArr[i].color + ';background:' + colorArr[i].bg : 'color:' + colorArr[(((labelArr.length) % (colorArr.length)) - 1)].color + ';background:' + colorArr[(((labelArr.length) % (colorArr.length)) - 1)].bg">{{ v }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    labelArr: {
      type: Array,
      // default: ["近地铁", "随时看房", "独立阳台"],
      default: []
    },
  },
  data() {
    return {
      colorArr: [
        { color: "#D24959", bg: "#ffdddc" },
        { color: "#d88e35", bg: "#ffefdc" },
        { color: "#33b1d0", bg: "#dcf8ff" },
      ],
    };
  },
};
</script>

<style scoped lang="less">
.lablebox {
  display: flex;
  margin-top: 18rpx;
  flex-wrap: wrap;
}

.labeone {
  min-width: 90rpx;
  height: 31rpx;
  text-align: center;
  line-height: 31rpx;
  padding: 0 5rpx;
  border-radius: 16rpx;
  font-size: 18rpx;
  box-sizing: border-box;
  display: inline-block;
  margin-right: 10rpx;
}
</style>